<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>reactjs</title>
	<script type="text/javascript" src="js/react.js"></script>
	<script type="text/javascript" src="js/react-dom.js"></script>
	<script type="text/javascript" src="js/browser.min.js"></script>
	<script type="text/javascript" src="js/JSXTransformer.js"></script>
	<style>
	.haha{
		color: red;
	}
	</style>
</head>
<body>
	<div id="contain"></div>
</body>
<!-- 要想使用reactjs，，，text后面需要时babel -->
<script type="text/babel">
	/*
	react.js文件是这个类库的核心
	react-dom 是这个类库里面DOM操作
	browser是浏览器渲染文件
	JSXTransformer 是语法转化器文件



	react：是facebook 推出的一个类库，，2013.5开源
	facebook最初用react做的项目叫做instagram
	react不依赖于其他现有的任何js类库或者框架
	基于第三点，react里面可以使用JQ这样的类库，也可以应用angularjs这样的框架
	react主要解决的问题：对于js频繁的操作DOM从而消耗性能来做的优化，采用的算法是DOM-diff（这个算法里面最重要的是使用虚拟DOM，
	基本原理：对于任何的DOM操作，在最终结果确认前，都是针对虚拟DOM的操作，也就是说浏览器并不会实时的一直操作DOM（虚拟DOM实际上是利用内存来处理的一种数据结构））

	区别于JQ
	里面都有对DOM 的操作，但是他们针对的方向不一样，
	1.对于JQ来说，他的思想是让DOM操作变得简单，从而释放程序员的压力
	1.对于react来说，虽然也是针对的DOM操作，但是他的主要目的是优化性能，并没有使DOM操作变得简单，



	7.React使用的是jsx语言，跟js不兼容


	*/ 


/*
学习react  1.渲染方法（一个方法）
			2.组件（一个功能模块，可以自定义（而且绝大部分都是自定义））
				这个组件类似于 BootStrap里面的组件。跟AngularJs指令挺像的
		

		什么是jsx语法
			简单说：就是在脚本标签同时，可以书写js代码和html代码，而且不需要添加任何引号


		react 框架，碰到“<”自动按照html语法解析，碰到其他的自动按照js语法解析

		达到了js和html混合使用



		1111.渲染方法  render   全局对象ReactDOM.render()，需要两个参数：1.渲染的效果2.渲染的位置
			其中第二个参数必须使用js原生的语法获取元素，不可以使用JQ
	





*/

		// ReactDOM.render(
		// 	<p>我是p<a href="#">我是a</a></p>,
		// 	document.getElementById("contain")
		// );


		// react更加强大的功能是他提供了许许多多的组件，，，，（组件可以嵌套，instagram这个项目，整体就会一个组件，但是其中嵌套了很多小组件）
		//定义组件
		// var zs = "zscNB"; 
		// var Zsc = React.createClass({
		// 	//必须有下面这对键值对 决定了组件的内容
		// 	render:function(){
		// 		// 里面添加class的时候只能写成className
		// 		return <h1 className = "haha">hello world{zs}</h1>;
		// 	}

		// });


		// ReactDOM.render(
		// 	<Zsc></Zsc>,
		// 	document.getElementById("contain")
		// );


		//在react里面元素内容可以直接识别数组
		// var array = ["大","中","小"];

		// ReactDOM.render(
		// 	<div>
		// 	{
		// 		array
		// 	}
		// 	</div>,
		// 	document.getElementById("contain")
		// );

//数组的一个方法：map   ：让数组里面每个元素执行函数，函数可以对这个数组的元素做出任何修改，但是修改之后并不会影响原来的数组，，，但是会返回一个新数组
	// var array = ["大","中","小"];
	// //第一个参数是里面的元素，，，第二个参数是元素的索引,下标
	// var haha = array.map(function(a,b){
	// 	return a;
	// });
	// console.log(array);
	// console.log(haha);


	//自定义组件
	var Par = React.createClass({
		//限制haha参数必须传递
		propTypes:{
			haha:React.PropTypes.string.isRequired
		},
		render:function(){
			return <h1>{this.props.haha}</h1>
		}
	});

	ReactDOM.render(
		<Par haha = "zsc" />,
		document.getElementById("contain")
	);



</script>
</html>